<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .setAvatar{position: relative;width:100px;height:130px;}
        .avatarImg{width:100px;height:100px;}
        .avatar{position: absolute;left:0;top:0;width:100px;height:100px;opacity: 0;}
        .submitAvatar{width:100px;height:30px;display: block;margin: 0 auto;}
    </style>
</head>
<body>
    <h3>这是个人信息页面</h3>
    <div>
        <form class="setAvatar" action="http://localhost:3000/avatar" method="post" enctype="multipart/form-data">
            <input type="hidden" name="token" class="token">
            <img src="https://dummyimage.com/100x100/eeeeee/999999.png&text=sh2202" alt="" class="avatarImg">
            <input type="file" name="avatar" class="avatar">
            <input type="submit" class="submitAvatar" value="上传">
        </form>
        <p>用户名：<span></span></p>
        <p>等级：<span></span></p>
        <p>xx龄：<span></span></p>
        <p>手机号：<span></span></p>
        <p>生日：<span></span></p>
        <p>标签：<span></span></p>
    </div>
</body>
<script>

    const token = localStorage.getItem("token");

    $(".token").value = token;

    let url = "http://localhost:3000/getuser?token=" + token
    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.onload = function(){
        if(xhr.status === 200){
            const res = JSON.parse(xhr.responseText).data;

            console.log(res);

            $(".avatarImg").src = res.avatar
        }
    }
    xhr.send();


    function $(sel){
        return document.querySelector(sel)
    }

</script>
</html>